import '../index.css'
import store from './redux/store';
import ProfileSetting from './ProfileSetting'
import { Provider, useSelector } from '../8_source/4_react_redux';

export default function ReduxToolkitTest() {
    return <Provider value={store}> <User /> </Provider>
}

function User() {
    return <>
        <Header />
        <Setting />
        <Summary />
    </>;
}

function Setting() {
    return (
        <div className='setting'>
            设置页面：
            <ProfileSetting />
            其它设置 <br />
            消息通知设置...

        </div>
    );
}

function Summary() {
    return <p>
        redux-toolkit是对redux进行优化，react-redux还是需要的 <br />
        总结： <br />
        优点：<br />
        1. 创建store更简单了，configureStore替代了createStore<br />
        2. 无需特别申明支持中间件了，默认支持。createAsyncThunk创建的异步action, 再slice中可以自动派发不同的状态<br />
        3. slice中异步action还是挺麻烦的，但是非异步的action可以在slice中自动产生
        4. immer库，可以以直接修改对象中数据，不需要返回新的对象
        缺点：<br />
        1. 还是不够简洁，要理解store, action, slice, reducer, 以及react-redux的Provider, useSelector, useDispatch
    </p>
}


export function Header() {
    // useSelector会自动订阅，自动销毁, 也能自动更新
    const username = useSelector(state => state.username);
    const unReadCount = useSelector(state => state.unReadCount);

    return (
        <div className='header'>
            <span>{username}</span>

            <span className='un-read'>
                未读
                <div className='un-read-num'>{unReadCount}</div>
            </span>
        </div>
    )
}